<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String contextPath = request.getContextPath(); 
    request.setAttribute("contextPath", contextPath);%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin 2 - Bootstrap Admin Theme</title>

    <!-- Bootstrap Core CSS -->
    <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${contextPath}/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--common Css-->
    <link href="${contextPath}/css/common.css" rel="stylesheet">

</head>

<body>

    <div id="wrapper">

        <!-- 固定提示框 -->
        <!--<div class="popupTip">提示<span class="glyphicon glyphicon-remove"></span></div></strong></div>-->

        <!-- Navigation -->
        <%@include file="nav.jsp"%>

        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">APP公告管理</h3>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a class="btn btn-primary" href="msgEdit.html" role="button">新增公告</a>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="panel-body">
                                <table width="100%" class="table table-striped table-hover" id="dataTables-example">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>公告主题</th>
                                        <th>公告标题</th>
                                        <th>欢迎语</th>
                                        <th>公告详情</th>
                                        <th>备注</th>
                                        <th>结束语</th>
                                        <th>发布时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>客服一号</td>
                                        <td>王梦雪</td>
                                        <td>81234646</td>
                                        <td>1888888888</td>
                                        <td>总管理员</td>
                                        <td>dddd</td>
                                        <td>dddd</td>
                                        <td>
                                            <a href="msgEdit.html"><i class="glyphicon glyphicon-pencil"></i></a>
                                            <a href="javascript:void(0)" class="delete"><i class="glyphicon glyphicon-trash"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>客服二号</td>
                                        <td>李慧玲</td>
                                        <td>13131313</td>
                                        <td>1885666668</td>
                                        <td>普通客服</td>
                                        <td>
                                            正常

                                        </td>
                                        <td>dddd</td>
                                        <td>
                                            <a href="msgEdit.html"><i class="glyphicon glyphicon-pencil"></i></a>
                                            <a href="javascript:void(0)" class="delete"><i class="glyphicon glyphicon-trash"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>客服三号</td>
                                        <td>丽丽</td>
                                        <td>1313131</td>
                                        <td>1885223646</td>
                                        <td>普通客服</td>
                                        <td>
                                            已冻结
                                        </td>
                                        <td>dddd</td>
                                        <td>
                                            <a href="msgEdit.html"><i class="glyphicon glyphicon-pencil"></i></a>
                                            <a href="javascript:void(0)" class="delete"><i class="glyphicon glyphicon-trash"></i></a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            <nav aria-label="Page navigation" class="pull-right">
                                <ul class="pagination">
                                    <li>
                                        <a href="#" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li>
                                        <a href="#" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>
        </div>
        <!-- /#page-wrapper -->

        <div class="modal fade" tabindex="-1" role="dialog" id="modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">提示信息</h4>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="sure">确定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="${contextPath}/js/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="${contextPath}/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${contextPath}/js/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${contextPath}/js/sb-admin-2.min.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
        $(function() {
            $('[data-toggle="popover"]').popover();

            //删除按钮
            $(".delete").on('click', function() {
                var str = '<p>删除账号可能导致其强制下线，但账号相关会话和统计将不受影响，确认删除?</p>';
                $("#sure").val(1);
                $(".modal-body").html(str);
                $("#modal").modal('show');
            });

            //冻结按钮
            $("button.btn-danger").on('click', function() {
                var str = '<p>确定要冻结吗?</p>';
                $("#sure").val(2);
                $(".modal-body").html(str);
                $("#modal").modal('show');
            });

            //解冻按钮
            $("button.btn-success").on('click', function() {
                var str = '<p>确定要解冻吗?</p>';
                $("#sure").val(3);
                $(".modal-body").html(str);
                $("#modal").modal('show');
            });

            //确定按钮
            $("#sure").click(function() {
                $("#modal").modal('hide');
                var value = $("#sure").val();
                //1是删除 2是冻结 3是解冻
                $.ajax({
                    url: ''
                });
            });

            //提示信息封装函数
            function notice(notice) {
                var str = '';
                str += '<div class="popupTip">';
                str += notice;
                str += '<span class="glyphicon glyphicon-remove"></span>';
                str += '</div>';
                str += '</strong></div>';
                //wrapper插入str
                $("#wrapper").append(str);
            }

            //取消提示框
            $("#wrapper").on('click', '.glyphicon-remove', function(){
                $(".popupTip") .hide();
            });
        })
    </script>

</body>

</html>